<template>
	<view class="audio-panel">
		<template v-if="props.type === 'voice'">
			<view v-show="src" class="title">来自<text>{{getFileName(src)}}</text>的声音: </view>
		</template>
		<template v-if="props.type === 'music'">
			<view v-show="src" class="title">正在播放歌曲<text>{{getFileName(src)}}</text>: </view>
		</template>
		<AudioPlayer @playPreOrNext="playPreOrNextAudio" :type="props.type" :src="src"></AudioPlayer>
		<FileList ref="filelistRef" :filetype="props.type" @change="selectFile"></FileList>
	</view>
</template>

<script lang="ts" setup>
import AudioPlayer from "./AudioPlayer/AudioPlayer.vue";
import FileList from "../FileList/FileList.vue";
import { getFileName } from "@/utils/fileManager";
import type { AudioType } from "../AudioPanel/AudioPanel.vue";
import type { PlayChangeType } from "./AudioPlayer/AudioPlayer.vue";

import { ref, onMounted, defineExpose, computed } from "vue";

interface Props {
	type: AudioType
}

const props = defineProps<Props>();
const src = ref("");

function selectFile(path: string) {
	src.value = path;
}

const filelistRef = ref(null)
function playPreOrNextAudio(isOrder: boolean, type: PlayChangeType) {
	filelistRef.value && (filelistRef.value as any).playPreOrNextAudio(isOrder, type);
}
</script>

<style lang="scss" scoped>
.audio-panel {
	
	.title {
		text {
			color: $uni-theme-color;
			margin: 0 6rpx;
			font-weight: bold;
		}
	}
	
}
</style>